<template>
  <div class="production-warn-page">
    <!-- 设备名称 -->
    <div class="equiment-name">
      <a-row>
        <a-form-model ref="ruleForm" :model="ruleForm">
          <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6" :xxl="6">
            <a-form-model-item ref="proName" label="设备名称" prop="proName">
              <a-input placeholder="请输入" disabled v-model="equName" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6" :xxl="6">
            <a-form-model-item ref="proName" label="工区" prop="proName">
              <a-select
                placeholder="请选择工区"
                v-model="ratioName"
                @change="ratioNameChange($event)"
              >
                <a-select-option
                  :value="item.id"
                  v-for="(item, index) in ratioSource"
                  :key="index"
                >
                  {{ item.areaName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6" :xxl="6">
            <a-form-model-item ref="proName" label="预警类型" prop="proName">
              <a-select
                placeholder="请选择预警类型"
                v-model="type"
                @change="warnTypeChange($event)"
              >
                <a-select-option value="1"> 实时预警 </a-select-option>
                <a-select-option value="2"> 成桩预警 </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-form-model></a-row
      >
    </div>
    <!-- table区域 -->
    <div class="table-container" v-loading="pageLoading">
      <vxe-table
        align="center"
        :data="tableData"
        show-overflow
        show-header-overflow
        show-footer-overflow
        show-footer
        :column-config="{ resizable: true }"
        class="scrollbarStyle"
        height="99%"
        :sort-config="{ trigger: 'cell' }"
        ref="xTable"
        :scroll-x="{ gt: 10 }"
        :scroll-y="{ gt: 100 }"
        :checkbox-config="{
          reserve: true,
        }"
      >
        <vxe-column
          :title="item.title"
          :field="item.key"
          :key="index"
          :min-width="item.width"
          show-overflow
          v-for="(item, index) in tableColumns"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template slot-scope="scope">
            <div v-if="item.key == 'fieldName'" class="materialName">
              <span>*</span>
              <span> {{ scope.row[item.key] }}</span>
            </div>
            <div v-if="item.formType == 'switch'">
              <a-switch
                checked-children="是"
                un-checked-children="否"
                v-model="scope.row[item.key]"
              />
            </div>
            <div v-if="item.formType == 'input'">
              <a-input
                type="number"
                placeholder="请输入"
                v-model="scope.row[item.key]"
              ></a-input>
            </div>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <!-- 提交按钮 -->
    <div class="footer">
      <a-button
        type="primary"
        style="margin-left: 10px"
        v-loading="submitLoading"
        :disabled="!ratioName || tableData.length == 0"
        @click="onSubmit()"
      >
        确定
      </a-button>
    </div>
  </div>
</template>

<script>
import {
  queryAreaList,
  snMixWarncfgDetail,
  snMixWarncfgEdit,
} from "@/api/user-center/equipmentManage.js";
export default {
  data() {
    return {
      pageLoading: true,
      submitLoading: false,
      ruleForm: {
        delivery: undefined,
        delivery2: undefined,
        delivery3: undefined,
        name: undefined,
        name2: undefined,
        name3: undefined,
        name4: undefined,
        name5: undefined,
        name6: undefined,
      },
      equName: undefined,
      type: "1",
      //
      tableData: [],
      tableColumns: [],
      ratioSource: [],
      ratioName: undefined,
      systemCode: "",
    };
  },
  mounted() {
    let { systemCode } = this.$route.query;
    this.systemCode = systemCode;
    //查询工区列表
    this.queryRatio();
  },
  methods: {
    onSubmit() {
      this.tableData.forEach((v) => {
        Object.keys(v).forEach((key) => {
          if (key.endsWith("IsWarningFlag")) {
            let startStr = key.split("IsWarningFlag")[0];
            let value = v[key];
            this.$set(v, startStr + "IsWarning", value ? 1 : 0);
            this.$set(v, "areaId", this.ratioName);
          }
        });
      });
      setTimeout((_) => {
        let warnData = this.validateData();
        if (warnData) {
          let { warnName } = warnData;
          this.$message.error("请输入： " + warnName);
          return;
        }
        this.submitLoading = true;
        let { systemCode, equTypeValue } = this.$route?.query || {};
        snMixWarncfgEdit({
          systemCode,
          equType: equTypeValue,
          data: this.tableData?.[0] || {},
          type: this.type,
        })
          .then((res) => {
            let { data } = res;
            if (data?.result) {
              this.$message.success("操作成功");
            } else {
              this.$message.error("操作失败，请稍后重试！");
            }
          })
          .catch((_) => {
            this.$message.error("操作失败，请稍后重试！");
          })
          .finally((_) => {
            this.submitLoading = false;
          });
      });
    },

    //监听预警类型切换
    warnTypeChange() {
      this.warncfgDetail();
    },

    //校验输入的完整性
    validateData() {
      try {
        this.tableData.forEach((v) => {
          Object.keys(v).forEach((key) => {
            let column = this.tableColumns.find((c) => c.key == key);
            if (column && column?.formType == "input") {
              if (
                v[key] + "" == "" ||
                v[key] + "" == "null" ||
                v[key] + "" == "undefined"
              ) {
                throw {
                  data: v,
                  warnName: column?.title || "--",
                };
              }
            }
          });
        });
      } catch (data) {
        return data;
      }
    },

    //查询结构面层
    queryRatio() {
      this.pageLoading = true;
      let { equNum, tenantCode, secCode, systemCode, equName } =
        this.$route?.query || {};
      this.equName = equName;
      queryAreaList({
        equCode: equNum,
        tenantCode,
        secCode,
        systemCode,
      })
        .then((res) => {
          let { data } = res;
          this.ratioSource = data?.result || [];
          this.ratioName = this.ratioSource?.[0]?.id || undefined;
          if (this.ratioSource.length == 0) {
            this.pageLoading = false;
          } else {
            this.warncfgDetail();
          }
        })
        .catch((_) => {
          this.ratioSource = [];
          this.ratioName = undefined;
          this.pageLoading = false;
        })
        .finally((_) => {});
    },

    //查询预警列表
    warncfgDetail() {
      let { equNum, tenantCode, secCode, systemCode } =
        this.$route?.query || {};
      let { ratioName, type } = this;
      this.pageLoading = true;
      this.tableColumns = [];
      snMixWarncfgDetail({
        equCode: equNum,
        tenantCode,
        secCode,
        systemCode,
        areaId: ratioName,
        type,
      })
        .then((res) => {
          let { data } = res;
          if (data?.result?.fieldList) {
            data?.result?.fieldList.forEach((v) => {
              let { name, key, type } = v;
              this.tableColumns.push({
                title: name,
                dataIndex: key,
                key: key,
                formType: type,
                width: "140",
              });
            });
          }
          if (data?.result?.warncfg) {
            this.tableData = [data?.result?.warncfg];
          } else {
            this.tableData = [];
          }
        })
        .catch((_) => {
          this.tableData = [];
        })
        .finally((_) => {
          this.pageLoading = false;
        });
    },

    //监听面层切换
    ratioNameChange() {
      this.warncfgDetail();
    },
  },
};
</script>

<style lang="less" scoped>
.production-warn-page {
  height: 100%;
  .flex();
  flex-direction: column;
  box-sizing: border-box;
  .equiment-name {
    padding: 20px 0 0 0;
    flex-shrink: 0;
  }
  .table-container {
    flex: 1;
    /deep/.ant-input {
      padding: 0 10px;
      text-align: center;
    }
    .materialName {
      .flex();
      justify-content: center;
      align-items: center;
      span {
        &:first-child {
          color: red;
          padding-top: 6px;
          margin-right: 2px;
        }
      }
    }
  }
  /deep/.ant-form {
    .ant-form-item {
      .flex();
      .ant-form-item-label {
        width: 100px;
        flex-shrink: 0;
      }
      .ant-form-item-control-wrapper {
        flex: 1;
        textarea {
          height: 80px;
        }
        .ant-calendar-picker {
          width: 100%;
        }
      }
    }
    .ant-col {
      &.largeScreen {
        .ant-form-item-label {
          width: 200px;
        }
      }
    }
    /deep/.ant-select {
      width: 100%;
    }
  }
  .footer {
    height: 72px;
    border-top: 1px solid #f3f4f6;
    margin-top: 18px;
    .flex();
    justify-content: center;
    align-items: center;
  }
}
</style>
